<template>
  <div class="slider" :style="`height:${setHeight}rem`">
    <van-swipe :autoplay="4000">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <div class="img-wrapper" :style="`height:${setHeight}rem`">
          <img :src="item" alt="" class="img">
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Button } from 'vant'
Vue.use(Swipe).use(SwipeItem).use(Button)
export default {
  props: ['setHeight', 'bannerList'],
  mounted () {
    // console.log(this.setHeight)
  }
}
</script>

<style lang="scss" scoped>
.slider {
  width: 100%;
  .van-swipe /deep/ .van-swipe__indicator--active{
      background-color: #fff;
    }
  .img-wrapper {
    width: 100%;
    .img{
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}
</style>
